<template>
    <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            fixed
            prop="name"
            label="客户名称"
            width="370">
            </el-table-column>
            <el-table-column
            fixed
            prop="address"
            label="公司地址"
            width="370">
            </el-table-column>
            <el-table-column
            fixed
            prop="contacts_name"
            label="联系人姓名"
            width="370">
            </el-table-column>
            <el-table-column
            fixed
            prop="contacts_phone"
            label="联系人电话"
            width="350">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="220">
            <template slot-scope="scope">
                <el-button type="text" @click="handleClick(scope.row.id)"> 编辑</el-button>
            </template>
            </el-table-column>
        </el-table>


        
        

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="客户名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="公司地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>

             <el-form-item label="联系人姓名" :label-width="formLabelWidth">
            <el-input v-model="form.contacts_name" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="联系人电话" :label-width="formLabelWidth">
            <el-input v-model="form.contacts_phone" autocomplete="off"></el-input>
            </el-form-item>
            
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="put_client ">确 定</el-button>
        </div>
        </el-dialog>


        <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="paginations.page_index"
			  :page-sizes="paginations.page_sizes"
			  :page-size="paginations.page_size"
			  :layout="paginations.layout"
			  :total="paginations.total">
		</el-pagination>

    </div>
</template>


<script>
import { client_get,companyapi_PUT, client_put } from '../../api/api.js'
export default {
    inject:['reload'],
    data(){
        return{
            paginations:{
                page_index:1, //当前页
                total:0, //总数
                page_size:5, //一页显示多少
                page_sizes:[5,10,15,20], //每页显示多少条
                layout:'total, sizes, prev, pager, next, jumper'
            },
            allTableData: [],
            tableData: [],
            dialogFormVisible: false,
            form: {
            name: '',
            address:'',
            contacts_name:'',
            contacts_phone:'',
            cid:'',
            
            },
            formLabelWidth: '120px',
            //公司
            com_id:'',
        }
    },
    mounted() {
        this.com_id = localStorage.getItem('com_id')
        //客户请求
        this.get_cilent()
    },
    methods: {
        // 修改客户
        put_client(){
            this.dialogFormVisible = false
            client_put(this.form).then(res=>{
                if(res.code==200){
                    this.$message(res.message)
                    this.reload()
                }
            })
        },
        // 获取客户
        get_cilent(){
            client_get({com_id:this.com_id}).then(res=>{
                console.log(res)
                this.allTableData =res.data
                this.setPaginations()
            }).catch(err=>{

            })
            
        },
        // 打开编辑
        handleClick(cid) {
            this.dialogFormVisible = true
            this.form.cid = cid

            for(let i=0,l=this.tableData.length;i<l;i++){
                if(this.tableData[i].id==cid){
                    this.form.name = this.tableData[i].name
                    this.form.address = this.tableData[i].address
                    this.form.contacts_name = this.tableData[i].contacts_name
                    this.form.contacts_phone = this.tableData[i].contacts_phone
                }
            }       
        },
        // 分页
        setPaginations(){
				this.paginations.total = this.allTableData.length; //数据的数量
				this.paginations.page_index = 1; //默认显示第一页
				this.paginations.page_size = 5; //每页显示多少数据
				
				//显示数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < this.paginations.page_size;
				})
			},
			handleSizeChange(page_size) {
				this.paginations.page_index = 1; //第一页
				this.paginations.page_size = page_size; //每页先显示多少数据
				this.tableData = this.allTableData.filter((item,index) => {
					return index < page_size
				})
			},
			handleCurrentChange(page){
				// 跳转页数
				//获取当前页
				let index = this.paginations.page_size * (page -1);
				//获取总数
				let allData = this.paginations.page_size * page;
				
				let tablist=[];
				for(let i = index;i<allData;i++) {
					if (this.allTableData[i]) {
						tablist.push(this.allTableData[i])
					}
					this.tableData = tablist
				}
			}
    },
}
</script>